// 默认运行webpack命令会调用的文件   配置文件      webpack.config.js  webpack.file.js

// webpack webpack-cli  webpack-dev-server   （webpack的模块）      loader + plugin
// vue-loader  vue-style-loader css-loader vue-template-compiler
//  @babel/core  @bebal/preset-env  babel-loader
// html-webpack-plugin

//npm install webpack webpack-cli webpack-dev-server vue-loader vue-style-loader css-loader vue-template-compiler @babel/core @babel/preset-env babel-loader html-webpack-plugin -D
const path = require('path');
const htmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const resolve=(dir)=> {
  return path.resolve(__dirname, dir)//传入路径 通过当前文件所在的位置找到这个
}
module.exports = {
  entry: resolve("./src/app.js"), //入口
  output: { //出口
    filename: 'bundle.js',
    path: resolve('dist') //路径
  },
  resolve: { //解析文件 按照以下顺序查找
    extensions: ['.js','.vue', '.css', '.jsx']
  },
  module: {//针对不同模块做处理
    
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {  //默认会把.vue里的样式变成 .css (lang)
        test: /\.css$/, //loader 的执行顺序 从下到上 从右到左
        use: ['vue-style-loader', 'css-loader']
      },
      {
        test: /\.js$/,
        use: {
          options: { //告诉js 文件需要通过es6 => es5的插件转化
            presets: ['@babel/preset-env']
          },
          loader: 'babel-loader'//默认使用babel-loader => babel-core   => (transform) =>preset
        },
        exclude: /node_modules/
      }
    ]
  },
  plugins:[
    new VueLoaderPlugin(),
    new htmlWebpackPlugin({
      template: resolve("./public/index.html")
    })
  ]
    
}